@charset "utf-8";
/*小米商城top*/
a{
    color: #333333;
}
div.side-top{
    width: 100%;
    height: 40px;
    background-color: black;
}
.side-top>.container{
    width: 1226px;
    margin: 0 auto;
    line-height: 40px;
    overflow: hidden;
}
.side-top>.container ul.top1 li{
    float: left;
    margin-left: 21px;
}
.side-top>.container ul.top1 li a{
    color: #b0b0b0;
}
.side-top>.container ul.top2 li a{
    color: #b0b0b0;
}
.side-top>.container ul.top1 li a:hover{
    color: white;
}
.side-top>.container ul.top2 li a:hover{
    color: white;
}
.side-top>.container ul.top1 li:first-child{
    margin: 0;
}
.side-top>.container ul.top2 li{
    float: right;
    margin-left: 20px;
}
.side-top>.container ul.top2 li:first-child{
    width: 72px;
    text-align: center;
}



/*购物车*/
div.side-top ul.top2 div.box-gwc{
    position: absolute;
    right: 338px;
    top: 39px;
    background-color: white;
    width: 316px;
    height: 100px;
    z-index: 10;
    text-align: center;
    line-height: 98px;
    border: 1px solid gainsboro;
    border-top: none;
    display: none;
}
div.side-top ul.top2 li:first-child:hover{
    background-color: white;
}
div.side-top ul.top2 li:first-child a:hover{
    color: red;
}

/*小米商城logo*/
div.side-logo{
    width: 100%;
    height: 100px;
    background-color: white;
}
div.side-logo>div.container{
    width: 1226px;
    margin: 0 auto;
    height: 100px;
    /*border: 1px solid black;*/
}
div.side-logo>div.container>ul.xmlogo>li{
    float: left;
    margin-top: 22px;
}
div.side-logo>div.container>ul.drop li{
    float: left;
    padding-left: 23px;
    font-size: 16px;
    line-height: 100px;
}
div.side-logo>div.container>ul.drop li a:hover{
    color: red;
}
div.side-logo>div.container>ul.drop li:first-child{
    padding-left: 190px;
}

/*搜索*/
#search{
    float: right;
}
#search input.search{
    width: 243px;
    height: 48px;
    margin-right: -3px;
}
#search input.search1{
    width: 50px;
    height: 50px;
    border-left: none;
    background-color: white;
}
#search input.search1:hover{
    color: white;
    background-color: red;
    border: none;
    cursor: pointer;
}
#search input{
    border:1px solid #bababa;
    outline: none;
    margin-top: 20px;
}
#search ul.down-list{
    position: absolute;
    margin-top: -33px;
    margin-left: 80px;
}
#search ul.down-list li{
    float: left;
    margin-left: 10px;
    /*border: 1px solid red;*/
    background-color: #e0e0e0;
}
#search ul.down-list li:hover{
    background-color: red;
}
#search ul.down-list li a:hover{
    color: white;
}

#search ul.down-list1{
    position: absolute;
    background-color: white;
    z-index: 1000;
    border: 1px solid red;
    border-top: none;
    display: none;
}
#search ul.down-list1 li{
    height: 29px;
    width: 233px;
    line-height: 29px;
    padding-left: 10px;
}
#search ul.down-list1 li span{
    float: right;
    padding-right: 10px;
    color: #bababa;
}
#search ul.down-list1 li:hover{
    background-color: #e0e0e0;
    cursor: pointer;
}



/*LOGO下拉*/
/*分类下拉菜单*/
#classDown{
    position: absolute;
    width: 100%;
    z-index: 1000;
    border-top: 1px solid #B0B0B0;
    box-shadow: 0 2px 2px #B0B0B0;
    display: none;
}
#classDown ul{
    list-style: none;
    width: 1226px;
    height: 230px;
    background-color: white;
    margin: 0 auto;
    padding-top: 45px;
    padding-left: 10px;
    overflow: hidden;
}
#classDown ul div{
    display: none;
}
#classDown ul li{
    float: left;
    padding: 0 20px;
    border-right: 1px solid #e0e0e0;
    overflow: hidden;
    text-align: center;
}
#classDown ul li:last-child{
    border: none;
}
#classDown ul li img{
    width: 160px;
    height: 110px;
    margin: 0 auto;
}







/*大轮播图*/
/*轮播左侧*/
div.lunbo .content .lunbo-left{
    position: absolute;
    z-index: 999;
    width: 234px;
    height: 460px;
    background-color: black;
    opacity: 0.9;
}
div.lunbo .content .lunbo-left li a{
    color: white;
    font-size: 14px;
}
div.lunbo .content .lunbo-left li:hover{
    background-color: #ff6700;
}
div.lunbo .content .lunbo-left li:first-child{
    margin-top: 20px;
}
div.lunbo .content .lunbo-left li{
    padding-left: 20px;
    height: 42px;
    line-height: 42px;
}
div.lunbo .content .lunbo-left li p{
    position: absolute;
    font-size: 30px;
    display: inline-block;
    right: 24px;
    line-height: 42px;
    color: #e0e0e0;
}




/*轮播图*/
div.lunbo{
    width: 100%;
}
.content{
    width: 1226px;
    height: 460px;
    margin: 0 auto;
    position: relative;
}
.content .pic a{
    position: absolute;
    top: 0;
    left: 0;
    display: none;
}
.content .pic a.current{
    display: block;
}
.content .indicator{
    position: absolute;
    right: 35px;
    bottom: 25px;
}
.content .indicator span{
    display: inline-block;
    width: 10px;
    height: 10px;
    background-color: black;
    text-align: center;
    line-height: 10px;
    cursor: pointer;
    box-sizing: border-box;
    border-radius: 50%;
}
.content .indicator span.active{
    background-color: antiquewhite;
    border: 2px solid gray;
}
.content .page{
    position: absolute;
    right: 30px;
    bottom: 30px;
    color: #d4c8c8;
}
.content .page span{
    display: inline-block;
    width: 41px;
    height: 69px;
    text-align: center;
    line-height: 69px;
    cursor: pointer;
    font-size: 50px;
    /*禁止用户选择页面上的内容*/
    -webkit-user-select: none;
    -moz-user-select: none;
}
.content .page span.prev{
    position: absolute;
    right:922px;
    top: -236px;
    border-top-right-radius:3px;
    border-bottom-right-radius:3px;
}
.content .page span.next{
    position: absolute;
    right:-30px;
    top: -236px;
    border-bottom-left-radius:3px;
    border-top-left-radius:3px;
}

.content .page span.prev:hover{
    background-color: rgba(100,100,100,0.6);
    color: white;
}
.content .page span.next:hover{
    background-color: rgba(100,100,100,0.6);
    color: white;
}

/*小米明星单品*/
    div.star1{
        width: 100%;
        height: 170px;
    }
    div.star1 .star{
        width: 1226px;
        height: 170px;
        margin: 14px  auto;
        background-color: white;
    }
   div.star1 .star ul.one{
       width: 234px;
       height: 100%;
       background-color: black;
   }
div.star1 .star ul.one img{
    width: 30px;
    height: 25px;
    margin-top: -10px;
}

div.star1 .star ul.one ul.one2{
    height: 50px;
}
div.star1 .star ul.one ul.one1{
    height: 100px;
    text-align: center;
}


div.star1 .star ul.one .one1 li{
    float: left;
    margin-left: 20px;
    margin-top: 30px;
}

div.star1 .star ul.one .one2 li{
    float: left;
    margin-left: 20px;
}
div.star1 .star ul.one li p{
    margin-top: 10px;
    /*margin-left: 2px;*/
    color: #cccccc;
}
div.star1 .star ul.one li p:hover{
    color: white;
}

div.star1 .star ul.two-1 li img{
    width: 316px;
    height: 170px;
}
div.star1 .star ul.two-1{
    width: 316px;
    height: 170px;
    margin-left: 14px;
}
div.star1 .star ul.two-1:last-child{
    margin-left: 15px;
}
div.star1 .star ul.two{
    float: left;
}

div.star1 .star ul.two-1:hover{
    box-shadow: 0 10px 30px #e0e0e0;
}
div.star1 .star ul.two-1{
    transition: box-shadow 0.4s;
}


/*小米笔记本*/

#note{
    width: 100%;
    height: 340px;
    margin-top: 20px;
}
#note2{
    position: relative;
    width: 1226px;
    height: 340px;
    margin: 0 auto;
    background-color: white;
    overflow: hidden;
    margin-top: 20px;
}
#note2 ul{
    width: 2452px;
    height: 340px;
    text-align: center;
    position: absolute;

}
#note2 ul li img{
    width: 130px;
    height: 125px;
    margin-top: 40px;
}
#note2 ul li{
    float: left;
    width: 234px;
    height: 339px;
    background-color: #fafafa;
    margin-left: 12px;
}
#note2 ul li.note2-1,li.note2-6{
    margin-left: 0;
    border-top: 1px solid #ffac13;
}
#note2 ul li.note2-2,li.note2-7{
    border-top: 1px solid #83c44e;
}
#note2 ul li.note2-3,li.note2-8{
    border-top: 1px solid #2196f3;
}
#note2 ul li.note2-4,li.note2-9{
    border-top: 1px solid #e53935;
}
#note2 ul li.note2-5,li.note2-10{
    border-top: 1px solid #00c0a5;
}

/*字体*/
#note1{
    width: 1226px;
    margin: 0 auto;
}
#note1 h1{
    font-weight: normal;
    margin-top: 25px;
    display: inline-block;
}
#note1 div.up1{
    float: right;
    margin-top: 40px;
    display: inline-block;
    width: 70px;
    height: 24px;
    border: 1px solid #e0e0e0;
    font-size: 20px;
    text-align: center;
    margin-right: 10px;
    line-height: 24px;
    font-weight: 300;
    color: #e0e0e0;
}
#note1 div.up1 span:first-child{
    border-right: 1px solid #e0e0e0;
    padding-right: 13px;
}
#note1 div.up1 span:last-child{
    padding-left: 10px;
}
#note1 div.up1 span:first-child:hover{
    color: #b0b0b0;
    cursor: pointer;
}
#note1 div.up1 span:last-child:hover{
    color: #b0b0b0;
    cursor: pointer;
}
#note2 ul li p:nth-child(2){
    margin-top: 30px;
    font-size: 14px;
}
#note2 ul li p:nth-child(3){
    margin-top: 20px;
    color: #b0b0b0;
}
#note2 ul li p:nth-child(4){
    margin-top: 30px;
    color: red;
}




/*智能硬件*/
main#Intelligence{
    width: 100%;
    background-color: #f5f5f5;
    margin-top: 120px;
}
main#Intelligence div.zn{
    width: 1226px;
    height: 800px;
    margin: 0 auto;
    overflow: hidden;
}
#Intelligence div.zn .zn-1{
    float: left;
    height:654px;
}
#Intelligence div.zn .zn-4{
    float: left;
}
#Intelligence div.zn ul.zn-4 li img{
    width: 130px;
    height: 140px;
    margin-top: 40px;
}
#Intelligence div.zn ul.zn-4 li{
    float: left;
    height: 300px;
    width: 234px;
    margin-left: 14px;
    /*border: 1px solid red;*/
    background-color: white;
    text-align: center;
}
#Intelligence div.zn ul.zn-3 li{
    margin-top: 10px;
}
#Intelligence div.zn ul.zn-4 li p{
    margin-top: 10px;
    font-size: 14px;
}
#Intelligence div.zn ul.zn-4 li p:last-child{
    margin-top: 20px;
    color: red;
}
#Intelligence div.zn h1{
    font-weight: normal;
    margin-top: 60px;
    margin-bottom: 20px;
}
#Intelligence div.zn span{
    display: inline-block;
    width: 90px;
    height: 26px;
    float: right;
    font-size: 16px;
    margin-top: -40px;
}
#Intelligence div.zn div.right{
    width: 20px;
    height: 20px;
    border-radius: 50%;
    font-size: 20px;
    float: right;
    background-color: #b0b0b0;
    text-align: center;
    line-height: 20px;
    margin-top: 2px;
}

#Intelligence div.zn span:hover{
    color: red;
    cursor: pointer;
}
#Intelligence div.zn ul li{
    transition: box-shadow 0.4s;
}
#Intelligence div.zn ul li:hover{
  box-shadow: 0 10px 10px #ccc;
}

/*搭配*/
#Intelligence div.coll{
    width: 1226px;
    height: 614px;
    margin:0 auto;
}
#Intelligence div.coll li{
    width: 234px;
    height: 300px;
    /*border: 1px solid gainsboro;*/
    float: left;
    margin-left: 13px;
    text-align: center;
}
#Intelligence div.coll li.coll-1 img{
    width: 234px;
    height: 300px;
}
#Intelligence div.coll li.coll-2 img{
    margin-top: 52px;
}
#Intelligence div.coll li.coll-1{
    margin-left: 0;
}
#Intelligence div.coll li.coll-3{
    margin-top: 10px;
}
#Intelligence div.coll li.coll-2{
    background-color: white;
}
#Intelligence div.coll p{
    margin-top: 10px;
    font-size: 14px;
}
#Intelligence div.coll p:nth-child(3){
    color: red;
}


#Intelligence div.coll div.final{
    width: 234px;
    height: 300px;
    /*border: 1px solid gainsboro;*/
    display: inline-block;
    margin-top: 10px;
    margin-left: 10px;
}
#Intelligence div.coll div.final .final1{
    width: 234px;
    height: 140px;
    /*border: 1px solid gainsboro;*/
    text-align: right;
    background-color: white;
}
#Intelligence div.coll div.final .final1 img{
    margin-top: 20px;
}
#Intelligence div.coll div.final p.final-p{
    /*text-align: center;*/
    margin-top: -100px;
    margin-left: 30px;
}
#Intelligence div.coll div.final p.final-s{
    /*text-align: center;*/
    margin-top: 20px;
    margin-left: 50px;
}
#Intelligence div.coll div.final2{
    width: 234px;
    height: 140px;
    /*border: 1px solid gainsboro;*/
    display: inline-block;
    /*text-align: center;*/
    background-color: white;
    margin-top: 62px;
    line-height: 50px;
}
#Intelligence div.coll div.final2 h2{
    font-weight: normal;
    margin-top: 20px;
    margin-left: 30px;
}
#Intelligence div.coll div.final2 p{
    margin-top: -10px;
    margin-left: 30px;
}
#Intelligence div.coll div.final2 img{
    float: right;
    margin-top: 40px;
    margin-right: 30px;
}
#Intelligence div.coll div.final2 img:hover{
    cursor: pointer;
}
#Intelligence div.coll p:hover{
    cursor: pointer;
}

#Intelligence div.hot{
    width: 1226px;
    margin: 0 auto;
}
#Intelligence div.hot h1{
    display: inline-block;
    font-weight: normal;
    margin-bottom: 20px;
}
#Intelligence div.hot span{
    float: right;
    font-size: 16px;
    margin-top: 10px;
    margin-left: 20px;
}

/*鼠标经过时的效果*/
#Intelligence div.hot span:hover{
    color: red;
    cursor: pointer;
    text-decoration: underline;
}
#Intelligence div.coll li:hover,div.final1:hover,div.final2:hover{
    box-shadow: 0 10px 10px #ccc;
}
#Intelligence div.coll li,div.final1,div.final2{
    transition: box-shadow 0.4s;
}

/*鼠标经过的遮罩层*/
#Intelligence div.slid{
    /*display: inline-block;*/
    width: 234px;
    height: 70px;
    /*background-color: #8dc11e;*/
    position: absolute;
    margin-left: 247px;
    margin-top: 230px;
    text-align: center;
    line-height: 20px;
    background-color: #ff6700;
    display: none;
}
#Intelligence p.p1{
    color: white;
}
#Intelligence p.p2{
    color: #ffb27f;
}
/*02*/
#Intelligence div.slid1{
    width: 234px;
    height: 70px;
    position: absolute;
    margin-left:494px;
    margin-top: 230px;
    text-align: center;
    line-height: 20px;
    background-color: #ff6700;
    display: none;
}
/*03*/
#Intelligence div.slid2{
    width: 234px;
    height: 70px;
    position: absolute;
    margin-left: 741px;
    margin-top: 230px;
    text-align: center;
    line-height: 20px;
    background-color: #ff6700;
    display: none;
}
/*04*/
#Intelligence div.slid3{
    width: 234px;
    height: 70px;
    position: absolute;
    margin-left: 988px;
    margin-top: 230px;
    text-align: center;
    line-height: 20px;
    background-color: #ff6700;
    display: none;
}


/*热评产品*/
#Intelligence div.review{
    width: 1226px;
    height: 418px;
    margin: 0 auto;
    /*border: 1px solid red;*/
    margin-top: 100px;
}
#Intelligence div.review h1{
    font-weight: normal;
    display: inline-block;
    position: absolute;
    margin-top: -60px;
}

#Intelligence div.review ul li:first-child{
    margin-left: 0;
}
#Intelligence div.review ul li{
    float: left;
    margin-left: 13px;
    width: 296px;
    height: 418px;
    background-color: white;
    transition: box-shadow 0.3s;
}
#Intelligence div.review ul li:hover{
    box-shadow: 0 10px 10px #ccc;
}

#Intelligence div.review ul li img{
    width: 296px;
    height: 222px;
}
#Intelligence div.review span.assess{
    display: inline-block;
    width: 240px;
    height: 70px;
    margin-left: 26px;
    margin-top: 34px;
    line-height: 24px;
    font-size: 14px;
}
#Intelligence div.review p{
    margin-left: 26px;
    color: #b0b0b0;
    margin-top: 20px;
}
#Intelligence div.review span.assess1{
    display: inline-block;
    width: 100px;

    border-right: 1px solid #b0b0b0;
    margin-left: 26px;
    font-size: 14px;
    margin-top: 18px;
}
#Intelligence div.review span.assess2{
    margin-left: 15px;
    font-size: 14px;
    color: red;
}

/*周边*/
#Intelligence div.peri li.coll-2 img{
    width: 130px;
    height: 140px;
    /*border: 1px solid red;*/
}
#Intelligence div.peri  div.tran img{
    width: 80px;
    height: 80px;
    margin-right: 30px;
}
#Intelligence div.zhoubian{
    margin-top: 50px;
}
#Intelligence div.peri{
    height: 700px;
}


/*预约维修服务*/
div.last{
    width: 100%;
    background-color: white;
}
div.last div.final{
    width: 1226px;
    height: 275px;
    margin: 0 auto;
}
 div.last .final div.final-1{
    width: 1226px;
    height: 85px;
    border-bottom: 1px solid #e0e0e0;
 }
div.last .final div.final-1 span{
    display: inline-block;
    width: 150px;
    height: 20px;
    font-size: 16px;
    margin-top: 33px;
    border-right: 1px solid #e0e0e0;
    margin-left: 50px;
    line-height: 20px;
    padding-right: 30px;
}
div.last .final div.final-1 span:last-child{
    border-right:none;
}
/*小图标*/
div.last .final div.final-1 span i{
    font-size: 20px;
}
div.last .final div.final-1 span:hover{
    color: red;
    cursor: pointer;
}

div.last div.final ul.end{
    width: 930px;
    height: 120px;
    border-right: 1px solid #e0e0e0;
    margin-top: 40px;
    display: inline-block;
}
div.last div.final ul.end ul.end111{
    color: #424242;
}
div.last div.final ul.end ul.end1{
    color: #757575;
}
div.last div.final ul.end ul.end1 li:nth-child(2){
    margin-left: 115px;
}
div.last div.final ul.end ul.end1 li:nth-child(5){
    margin-left: 117px;
}
div.last div.final ul.end ul.end1 li:nth-child(4){
    margin-left: 112px;
}
div.last div.final ul.end ul.end1 li:nth-child(6){
    margin-left: 117px;
}


div.last div.final ul.end li:first-child{
    margin-left: 0;
}
div.last div.final ul.end li{
    float: left;
    margin-left: 110px;
    font-size: 14px;
}
div.last div.final ul.end ul.end1 li:first-child{
    margin-left: 0;
}
div.last div.final ul.end ul.end222{
    margin-top: 35px;
}

div.last div.final ul.end ul.end1 li{
    font-size: 12px;
    margin-top: 10px;
    margin-left: 120px;
    width: 50px;
}
div.last div.final ul.end-2{
    float: right;
    margin-top: 33px;
    margin-right: 60px;
    text-align: center;
}
div.last div.final ul.end-2 .end2-1{
    font-size: 24px;
    color: red;
}
div.last div.final  ul.end1 li:hover{
    cursor: pointer;
    color: red;
}
div.last div.final ul.end-2 span{
    width: 120px;
    height: 30px;
    border:1px solid red;
    display: inline-block;
    text-align: center;
    line-height: 30px;
    color: red;
    margin-top: 20px;
}
div.last div.final ul.end-2 p.end2-3{
    margin-top: 5px;
}
div.last div.final ul.end-2 span:hover{
    cursor: pointer;
    color: white;
    background-color: red;
}
div.last div.final ul.end-2 span i{
    margin-right: 5px;
    font-size: 14px;
}

/*页脚*/
footer{
    width: 100%;
    height: 150px;
    background-color: #fafafa;
}
footer div.f1{
    width: 1226px;
    height: 150px;
    margin: 0 auto;
}
footer div.f1 ul.f1{
    float: left;
    margin-top: 30px;
}
footer div.f1 ul.f2 li{
    float: left;
    margin-top: 30px;
    margin-left: 5px;
    border-right: 1px solid #b0b0b0;
    padding-right: 5px;
}
footer div.f1 ul.f3{
    float: left;
    margin-left: 5px;
}
footer div.f1 ul.f3 li{
    margin-top: 5px;
    color: #b0b0b0;
}

footer div.f1 ul.f4 li.first img{
    width: 80px;
    height: 26px;
}


footer div.f1 ul.f4{
    float: right;
    margin-top: -15px;
}
footer div.f1 ul.f4 li{
    float: left;
    margin-left: 10px;
}
footer div.f1 li.f5{
    position: absolute;
    display: inline-block;
    color: #bababa;
    margin-left: -350px;
    margin-top: 110px;
    font-size: 22px;
    font-family: 楷体;
}




























